<!--
 * @LastEditors: Yang.Zzz
 * @LastEditTime: 2024-05-17 09:33:06
-->
<script setup>
import { onMounted, ref, watch,computed, reactive } from "vue";
import { useRoute } from "vue-router";
import { useStore } from 'vuex';
import instance   from '../utils/api'

const showTaskDetail =  ref(false)
const checked2 = ref(false)

const route = useRoute()

const store  = useStore()
const taskList = computed(() => store.state.task.taskList);


const taskDetail =  reactive({

})

onMounted(async () => {
    try {
        const result = await instance.get('/activitynewuser_old.php', { params: {action: 'getAllConfig'}}  )
        console.log("🚀 ~ onMounted ~ result:", result)
    } catch (error) {
        console.log("🚀 ~ onMounted ~ error:", error)
    }
    

    const handleChangeParams = () => {
        const taskId = route.params.taskId
        const activeTaskInfo = taskList.value.find(option => option.id === taskId)
        showTaskDetail.value = activeTaskInfo ? true : false
        if(activeTaskInfo) {
            for (let key in activeTaskInfo) {  
                if (activeTaskInfo.hasOwnProperty(key)) { // 检查属性是否是对象自身的属性（而不是继承的）  
                    taskDetail[key] = activeTaskInfo[key]
                }  
            }
        }
    }
    watch(taskList, (newVal) => {
        handleChangeParams()
    },
    {immediate: true ,deep:true})

    watch(
        ()=> route.path,
        (newPath) => {
            handleChangeParams()
        },
        {immediate: true }
    )


})

const value2 =  ref(0)
const textarea2 = ref('')

const handleInputTextArea = (event) => {
    const taskId = route.params.taskId
    const activeTaskInfo = taskList.value.find(option => option.id === taskId)
    if(activeTaskInfo) {
        activeTaskInfo.datail = event
        console.log(taskList.value)
    }
}

</script>

<template>
  <div class="task-detail-view h-full">
    <div v-if="showTaskDetail" class="task-detail-content--info h-full fboxRow">
        <div class="detail-info-header fboxYcenter relative">
            <div class="info-header-check">
                <el-checkbox v-model="checked2"></el-checkbox>
            </div>
            <div class="info-header-date fboxYcenter header-icon">
                <el-icon :size="16"><Calendar /></el-icon>
                <span class="date-text ml-4">5月18日</span>
            </div>
            <div class="info-header-flag header-icon fboxCenter">
                <el-icon :size="16"><Flag /></el-icon>
            </div>
        </div>
        <div class="detail-info-slider">
            <el-slider v-model="value2" :step="10" />
        </div>
        <div class="detail-info-inner">
            <div class="info-inner-title">
                {{ taskDetail.title  }}
            </div>
            <div class="info-inner-textarea">
                <el-input
                    @input="handleInputTextArea"
                    v-model="taskDetail.datail"
                    :autosize="{ minRows: 1, maxRows: 200 }"
                    type="textarea"
                    placeholder="描述"
                />
            </div>
        </div>
    </div>
    <div v-else class="task-detail-content--empty h-full fboxCenter">
        <div class="task-empty-inner">
            <div class="task-empty-img">
                <img alr="" src="../assets/img/empty-logo.png" />
            </div>
            <div class="task-empty-desc">
                点击任务标题查看详情
            </div>
        </div>
    </div>
  </div>

</template>

<style scoped>
.task-detail-view  {
    flex: 1;
}
.task-empty-desc  {
    margin-top: 34px;
    text-align: center;
    line-height: 20px;
    font-size: 16px;
}

.task-detail-content--info  {
    flex-direction: column;
}

.detail-info-header {
    padding:20px 16px;
    padding-bottom: 0px;
}

.detail-info-header  .info-header-date  {
    position: relative;
    width: auto;
    padding: 0 4px;
}

.detail-info-header .info-header-check  {
    padding-left: 12px;
    margin-right: 12px;
}

.detail-info-header  .info-header-date::after {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 14px;
    top: 50%;
    left: -4px;
    transform: translateY(-50%);
    background: rgba(25,25,25,0.2);
}

.detail-info-header  .info-header-date .date-text  {
    color: #4772Fa;
    font-size: 14px;
    white-space: nowrap;
}
.detail-info-header  .info-header-flag  {
    position: absolute;
    right: 16px;
    bottom: 3px;
    margin: auto 0;
}

.detail-info-header .header-icon {
    cursor: pointer;
    border-radius: 6px;
}

.detail-info-header .header-icon:hover  {
    background: rgba(25,25,25,0.05);
}

/* :deep(.el-slider__button-wrapper)  {
    visibility: hidden;
} */

:deep(.el-slider__button-wrapper  .el-slider__button) {
    width: 2px;
    height: 2px;
    border: none;
    /* background: rgba(71, 114, 250,1); */
}

:deep(.el-slider__bar) , :deep(.el-slider__runway) {
    height: 2px;
}

:deep(.el-slider__bar) {
    background: rgba(71, 114, 250,1);
}

.detail-info-inner .info-inner-title {
    color: #191919;
    font-size: 16px;
    font-weight: bold;
    padding: 16px 20px 4px 20px;
}   

.detail-info-inner :deep(.el-textarea__inner)  {
    box-shadow: none !important;
    padding-left: 20px;
}

.detail-info-inner :deep(.el-textarea)  {
    width: 100% !important;
}
</style>
